@import "../../colors";
@import "../../frameless";

.card {
    border-radius: 8px / $em;
    box-shadow: 0 0 0 .125rem $active-gray;
    background-color: $ui-white;

    .card-button {
        display: block;
        border-radius: .5rem;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        box-shadow: none;
        background-color: $ui-aqua;
        width: 23.75rem;
        height: 4rem;

        &:hover {
            box-shadow: none;
        }
    }

    .validation-message {
        $arrow-border-width: 1rem;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(16rem, 0);
        margin-left: $arrow-border-width;
        border: 1px solid $active-gray;
        border-radius: 5px;
        background-color: $ui-orange;
        padding: 1rem;
        max-width: 18.75rem;
        min-height: 1rem;
        overflow: visible;
        color: $type-white;

        &:before {
            display: block;
            position: absolute;
            top: 1rem;
            left: -$arrow-border-width / 2;

            transform: rotate(45deg);

            border-bottom: 1px solid $active-gray;
            border-left: 1px solid $active-gray;
            border-radius: 5px;

            background-color: $ui-orange;
            width: $arrow-border-width;
            height: $arrow-border-width;

            content: "";
        }
    }

    .form {
        padding: 3rem 4rem;

        .card-button {
            margin: 0 0 -3rem -4rem;
        }

        .row {        
            margin-bottom: 1.2rem;

            &.has-error {
                .input {
                    border: 1px solid $ui-orange;
                }
            }

            .col-sm-9 {
                position: relative;
            }
        }
    }
}

@media only screen and (max-width: $mobile - 1) {
    .card {
        width: 22.5rem;

        .form {
            text-align: left;

            .button {
                width: 22.5rem;
            }
        }
    }
}

@media only screen and (max-width: $tablet - 1) {
    .card {
        .input {
            width: 90%;
        }
    }
}

@media only screen and (max-width: $desktop - 1) {
    .card {
        .validation-message {
            position: relative;
            transform: none;
            margin: inherit;
            width: 100%;
            height: inherit;

            &:before {
                display: none;
            }
        }
    }
}
